<template>
  <div class="salesAnalysis">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="never">
          <div class="couponCollectionList_card">今日完成单</div>
          <div class="couponCollectionList_card">{{ruleForm.workOrderNum?ruleForm.workOrderNum:'-'}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div class="couponCollectionList_card">今日支付订单</div>
          <div class="couponCollectionList_card">{{ruleForm.paidNum?ruleForm.paidNum:'-'}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div class="couponCollectionList_card">今日营收金额</div>
          <div class="couponCollectionList_card">{{ruleForm.revenueAmt?'￥'+ruleForm.revenueAmt:'-'}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div class="couponCollectionList_card">今日服务人员佣金</div>
          <div class="couponCollectionList_card">{{ruleForm.commission?'￥'+ruleForm.commission:'-'}}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>今日营收</span>
          </div>
          <div>
            <lineSections
              :dataList="dataList"
              :dataX="dataX"
              :dataValue="dataValue"
              v-if="trendShow"
              class="revenueToday"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>会员统计</span>
          </div>
          <div>
            <TrendChart
              :dataList="dataList3"
              :dataX="dataX3"
              :dataValue="dataValue3"
              v-if="trendShow3"
              class="MembershipStatistics"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>今日各业态营收分布</span>
          </div>
          <div>
            <lineSections
              :dataList="dataList4"
              :dataX="dataX4"
              :dataValue="dataValue4"
              v-if="barYCtegoryShow4"
              class="todayFormats"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>昨日各业态营收分布</span>
          </div>
          <div>
            <lineSections
              :dataList="dataList5"
              :dataX="dataX5"
              :dataValue="dataValue5"
              v-if="barYCtegoryShow5"
              class="todayFormats5"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日门店单量排行</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="view('shop')"
            >更多门店数据></el-button>
          </div>
          <div>
            <barYCtegory
              :dataList="dataList1"
              :dataY="dataY1"
              :dataValue="dataValue1"
              v-if="barYCtegoryShow1"
              class="storesTodayPaiHang"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日门店营收排行</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="view('shop')"
            >更多门店数据></el-button>
          </div>
          <div>
            <barYCtegory
              :dataList="dataList2"
              :dataY="dataY2"
              :dataValue="dataValue2"
              v-if="barYCtegoryShow2"
              class="storesTodayYingShou"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品销量榜 top 20</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="view('goods')"
            >更多商品数据></el-button>
          </div>
          <div>
            <avue-crud
              ref="crud1"
              style="width:100%"
              :data="loadData1"
              :option="tableOption1"
              :table-loading="loading1"
            ></avue-crud>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { tableOption1 } from "./index.config.js";
import TrendChart from "@/components/dashboard/TrendChart.vue";
import barYCtegory from "@/components/dashboard/barYCtegory.vue";
import lineSections from "@/components/dashboard/lineSections.vue";
import { dataStatistical } from "@/api/shop/dataCenter.js";
var upColor = "#ec0000";
var upBorderColor = "#8A0000";
var downColor = "#00da3c";
var downBorderColor = "#008F28";
export default {
  components: {
    TrendChart,
    barYCtegory,
    lineSections,
  },
  data() {
    return {
      //今日营收
      trendShow: true,
      dataList: ["实时", "昨日同期"],
      dataX: [],
      dataValue: [
        {
          name: "实时",
          type: "line",
          stack: "总量",
          data: [],
        },
        {
          name: "昨日同期",
          type: "line",
          stack: "总量",
          data: [],
        },
      ],
      //今日各业态营收分布
      barYCtegoryShow4: true,
      dataList4: ["商超", "洗衣", "家政", "咖吧"],
      dataX4: [],
      dataValue4: [
        {
          name: "商超",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
        {
          name: "洗衣",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
        {
          name: "家政",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
        {
          name: "咖吧",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
      ],
      //昨日日各业态营收分布
      barYCtegoryShow5: true,
      dataList5: ["商超", "洗衣", "家政", "咖吧"],
      dataX5: [],
      dataValue5: [
        {
          name: "商超",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
        {
          name: "洗衣",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
        {
          name: "家政",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
        {
          name: "咖吧",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: [],
        },
      ],
      //今日门店单量排行
      barYCtegoryShow1: true,
      dataList1: [],
      dataY1: [],
      dataValue1: [
        {
          name: "订单量",
          type: "bar",
          data: [],
        },
      ],

      //今日门店营收排行
      barYCtegoryShow2: true,
      dataList2: [],
      dataY2: [],
      dataValue2: [
        {
          name: "订单量",
          type: "bar",
          data: [],
        },
      ],

      //会员统计
      trendShow3: true,
      dataList3: ["新增记录", "活跃记录"],
      dataX3: [],
      dataValue3: [
        {
          name: "新增记录",
          type: "line",
          stack: "总量",
          data: [],
        },
        {
          name: "活跃记录",
          type: "line",
          stack: "总量",
          data: [],
        },
      ],

      //商品销量榜
      loadData1: [],
      tableOption1,
      loading1: false,
      ruleForm: {},
      searchForm: {},
    };
  },
  methods: {
    getList(searchForm, page) {
      if (searchForm) {
        this.searchForm = searchForm;
      }
      this.trendShow = false;
      this.trendShow3 = false;
      this.barYCtegoryShow1 = false;
      this.barYCtegoryShow2 = false;
      this.barYCtegoryShow4 = false; //今日各业态
      this.barYCtegoryShow5 = false; //昨日各业态
      dataStatistical(this.searchForm).then((val) => {
        console.log(val);
        let data = val.data.data;
        if (data.dataCountDto) {
          //数据统计
          this.ruleForm = data.dataCountDto;
        }
        if (data.goodsSalesDto) {
          //商品销量排行榜
          this.loadData1 = data.goodsSalesDto;
        }
        if (data.dataTodayRevenueDto) {
          //今日营收
          this.dataValue[0].data = [];
          this.dataX = [];
          data.dataTodayRevenueDto.forEach((item) => {
            this.dataValue[0].data.push(item.orderRevenue);
            this.dataX.push(item.onHour);
          });
          this.trendShow = true;
        }
        if (data.dataYesterdayRevenueDto) {
          //昨日营收
          this.dataValue[1].data = [];
          data.dataYesterdayRevenueDto.forEach((item) => {
            this.dataValue[1].data.push(item.orderRevenue);
          });
          this.trendShow = true;
        }
        if (data.personCountDto) {
          //会员统计
          this.dataValue3[0].data = [];
          this.dataValue3[1].data = [];
          this.dataX3 = [];
          data.personCountDto.forEach((item) => {
            this.dataValue3[0].data.push(item.increaseNum);
            this.dataValue3[1].data.push(item.activeNum);
            this.dataX3.push(item.onDate);
          });
        }
        if (data.dataTodayShopNumDto) {
          //今日门店单量排行
          this.dataValue1[0].data = [];
          this.dataY1 = [];
          data.dataTodayShopNumDto.forEach((item) => {
            this.dataValue1[0].data.push(item.orderNum);
            this.dataY1.push(item.shopName);
          });
          this.barYCtegoryShow1 = true;
        }

        if (data.dataTodayShopRevenueDto) {
          //今日门店营收排行
          this.dataValue2[0].data = [];
          this.dataY2 = [];
          data.dataTodayShopRevenueDto.forEach((item) => {
            this.dataValue2[0].data.push(item.orderAmt);
            this.dataY2.push(item.shopName);
          });
          this.barYCtegoryShow2 = true;
        }

        if (data.dataTodayBusinessRevenueDto) {
          //今日各业态营收分布
          this.dataValue4[0].data = [];
          this.dataValue4[1].data = [];
          this.dataValue4[2].data = [];
          this.dataValue4[3].data = [];
          this.dataX4 = [];
          data.dataTodayBusinessRevenueDto.forEach((item) => {
            if (item.bussinessType) {
              if (item.bussinessType.indexOf("02") > -1) {
                this.dataValue4[0].data.push(item.orderRevenue);
              }
              if (item.bussinessType.indexOf("03") > -1) {
                this.dataValue4[1].data.push(item.orderRevenue);
              }
              if (item.bussinessType.indexOf("04") > -1) {
                this.dataValue4[2].data.push(item.orderRevenue);
              }
              if (item.bussinessType.indexOf("05") > -1) {
                this.dataValue4[3].data.push(item.orderRevenue);
              }
            }

            this.dataX4.push(item.onHour);
          });
          this.barYCtegoryShow4 = true;
        }
        if (data.dataYesterdayBusinessRevenueDto) {
          //昨日各业态营收分布
          this.dataValue5[0].data = [];
          this.dataValue5[1].data = [];
          this.dataValue5[2].data = [];
          this.dataValue5[3].data = [];
          this.dataX5 = [];
          data.dataYesterdayBusinessRevenueDto.forEach((item) => {
            if (item.bussinessType) {
              if (item.bussinessType.indexOf("02") > -1) {
                this.dataValue5[0].data.push(item.orderRevenue);
              }
              if (item.bussinessType.indexOf("03") > -1) {
                this.dataValue5[1].data.push(item.orderRevenue);
              }
              if (item.bussinessType.indexOf("04") > -1) {
                this.dataValue5[2].data.push(item.orderRevenue);
              }
              if (item.bussinessType.indexOf("05") > -1) {
                this.dataValue5[3].data.push(item.orderRevenue);
              }
            }

            this.dataX5.push(item.onHour);
          });
          this.barYCtegoryShow5 = true;
        }
      });
    },
    view(name) {
      if (name == "shop") {
        this.$router.push({ path: "/dataReport/storeData/index" });
      } else {
        this.$router.push({ path: "/dataReport/goodsData/index" });
      }
    },
  },
};
</script>
<style lang="scss">
.salesAnalysis {
  .box-card {
    min-height: 500px;
  }
  .couponCollectionList_card {
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>